<template>
  <div class="table-insert-panel">
    <div class="panel-content">
      <!-- 表格大小选择器 -->
      <div class="table-size-selector">
        <div class="size-info">
          <span v-if="hoverRows > 0 && hoverCols > 0">
            {{ hoverRows }} × {{ hoverCols }}
          </span>
          <span v-else>0 × 0</span>
        </div>
        <div class="size-grid">
          <div
            v-for="row in 10"
            :key="`row-${row}`"
            class="size-row"
            @mouseenter="handleRowHover(row)"
            @mouseleave="handleRowLeave"
          >
            <div
              v-for="col in 10"
              :key="`cell-${row}-${col}`"
              class="size-cell"
              :class="{
                hover: hoverRows >= row && hoverCols >= col,
              }"
              @mouseenter="handleCellHover(row, col)"
              @mouseleave="handleCellLeave"
              @click="selectTableSize(row, col)"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { TableConfig } from "./types";

// 定义事件
const emit = defineEmits<{
  insert: [tableConfig: TableConfig];
}>();

// 响应式数据
const hoverRows = ref(0);
const hoverCols = ref(0);

// 处理单元格悬停
const handleCellHover = (row: number, col: number) => {
  if (row > 0 && col > 0) {
    hoverRows.value = row;
    hoverCols.value = col;
  }
};

// 处理单元格离开
const handleCellLeave = () => {
  //hoverRows.value = 0
  //hoverCols.value = 0
};

// 处理行悬停
const handleRowHover = (row: number) => {
  if (row > 0) {
    hoverRows.value = row;
    // 保持当前列的选择
    if (hoverCols.value === 0) {
      hoverCols.value = 1;
    }
  }
};

// 处理行离开
const handleRowLeave = () => {
  //hoverRows.value = 0
  //hoverCols.value = 0
};

// 选择表格大小
const selectTableSize = (rows: number, cols: number) => {
  if (rows > 0 && cols > 0) {
    const tableConfig: TableConfig = {
      rows: rows,
      cols: cols,
    };
    emit("insert", tableConfig);
  }
  hoverRows.value = 0;
  hoverCols.value = 0;
};
</script>

<style scoped>
.table-insert-panel {
  width: fit-content;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

.panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 表格大小选择器 */
.table-size-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.size-info {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-align: center;
}

.size-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1px;
}

.size-row {
  display: flex;
  gap: 2px;
  padding: 1px;
}

.size-cell {
  width: 20px;
  height: 20px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  flex-shrink: 0;
}

.size-cell:hover {
  background: #e5e7eb;
}

.size-cell.hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
</style>
